import React from "react";
import { CurtDown } from "../";
import style from './style.module.css'
interface PropsType {
  title: string;
  curtDownTime: number;
  list: {
    nickname: string;
    avator: string;
    count: string;
  }[];
}

export const ActiveItem: React.FC<PropsType> = ({
  title,
  curtDownTime,
  list,
}) => {
  return (
    <div className={ style['item'] }>
      <h3 className={ style['between'] } style={{ borderBottom: '1px solid #ccc' }}>
        <span>{title}</span>
        <CurtDown curtDownTime={ curtDownTime }></CurtDown>
      </h3>
      <ul>
        {list.map((v, i) => {
          return (
            <li key={i} className={ [style['between'],style['li']].join(' ') }>
              <div>
                <span>{i + 1}</span>
                <img src={v.avator} alt="" className={ style['img'] }/>
                <span>{v.nickname}</span>
              </div>
							<b>+{v.count}</b>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
